<template>
    <div>
        <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="back" />
        <div v-show="choose">
            <van-empty description="购物车无内容" />
            <van-button round type="danger" size="large" @click="look">立即购物</van-button>
        </div>
        <van-row v-for="item in list" :key="item.cartid">
            <van-col span="2">
                <van-radio-group>
                    <van-radio :checked="item.flag" @click="selectOne(item.cartid, !item.flag)"></van-radio>
                </van-radio-group>
            </van-col>
            <van-col span="6">
                <img :src="item.img1" width="80">
            </van-col>
            <van-col span="8" class="van">
                <van-swipe-cell>
                    <span>{{ item.proname }}</span>
                    <p>￥{{ item.originprice }}</p>
                    <van-stepper v-model="item.num" @change="cartNum(item.cartid, item.num)" />
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" @click="del(item.cartid)" />
                    </template>
                </van-swipe-cell>
            </van-col>
        </van-row>
        <h4>可能你还想要</h4>
        <div>
            <van-list v-model:loading="loading" :finished="finished" @load="onload">
                <ul class="box5">
                    <li v-for="item in list1" :key="item.proid" @click="de(item.proid)">
                        <img :src="item.img1" style="width:150px">
                        <p>{{ item.proname }}</p>
                        <p>￥{{ item.originprice }}</p>
                    </li>
                </ul>
            </van-list>
        </div>
        <van-submit-bar :price="payAll" button-text="提交订单">
            <van-checkbox :checked="checkedAll" @click="selectAll">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref,computed} from "vue"
import { recommend,lookCar,dele,selectO,selectA,update } from "@/service/car"
import { useCounterStore } from "@/stores/counter"
let router = useRouter()
let store = useCounterStore()
let count = ref(1)
let limitNum = ref(12)
let userid = ref((store as any).userInfo.userid)
let carNums = ref(null)
let list1 = ref([] as any)
let list = ref([] as any)
let choose = ref(true)
let loading = ref(false)
let finished = ref(false)
const checkedAll = computed(()=>{
    return list.value.every((item: { flag: any; }) => item.flag)
})
const payAll = computed(()=>{
    return list.value.reduce((prev:any, item:any) => {
        return prev + (item.flag ? item.originprice * item.num * 100 : 0)
      }, 0)
})
const back = () => {
    router.push("/home")
    console.log(list.value)
}
const de = (id: any) => {
    router.push("/detail/" + id)
}
const onload = () => {
    recommend(count.value, limitNum.value).then((res) => {
        list1.value = list1.value.concat(res.data)
        loading.value = false
        if (list1.value.length >= 12) {
            finished.value = true
        }
    })
}
const look = ()=>{
    lookCar(userid.value).then((res:any)=>{
        console.log(res)
    })
}
const del = (val:any) =>{
    dele(val).then((res:any)=>{
        if(res.code==="200"){
            look()
        }
    })
}
const selectOne = (cartid:any,flag:any)=>{
    selectO(cartid.value,flag.value).then((res:any)=>{
        if(res.code==="200"){
            look()
        }
    })
}
const selectAll =()=>{
    selectA(userid.value,!checkedAll).then((res:any)=>{
        if(res.code==="200"){
            look()
        }
    })
}
const cartNum =(cartid:any,num:any)=>{
    update(cartid,num).then((res)=>{
        console.log(res)
    })
}
look()
</script>

<style scoped>
h4 {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
}

.box5 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.box5 li {
    width: 47%;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    margin-left: 10px;
}

.box5 li p {
    width: 150px;
}

.box5 li p:nth-of-type(2) {
    color: red;
}

.van-submit-bar__bar {
    justify-content: flex-start;
}
</style>